<template>
 <view class="select-search"  ref="selectSearch">
  <view class="select-body">
	<view class="inp">
   <input type="text" placeholder="设备名称" class="input"
	 v-model="searchVal" 
	 autocomplete="off" 
	 @focus="changeColor" 
	 @blur="inpblur"
	 />
	<view  class="select_text" @click="search">搜索</view>
	</view>
     <ul class='ul' v-show="typeaheadData.length>0&&isExpand">
      <li v-for="(item,index) in typeaheadData" :key="index" 
		:class="item.active ? 'active':''" 
		@click="selectChild(index)">
		{{item.name}}
      </li>
     </ul>
  </view>
 </view>
</template>
<script>
 export default {
  name: 'selectSearch',
  data: function () {
   return {
    searchVal: '', // 搜索关键字
    currentIndex: -1, // 当前默认选中的index,
    isExpand:true,
	searchdata:{}
   }
  },
  computed: {
   typeaheadData () {
    let temp = [];
    if (this.searchVal=== '') {
     return [];
    } else {
     this.currentIndex = -1; // 重置特殊情况下的索引
     this.mapData.map(item => {
  if(item.name.indexOf(this.searchVal.toLowerCase().trim()) !== -1){
      item.zt=false
       temp.push(item)
	}
     })
     return temp;
    }
   }
  },
  props: {
   mapData: { // 外部传入的列表数据
    type: Array,
    default: function () {
     return []
    }
   }
  },
  methods: {
	changeColor(e){
	this.isExpand=true
	},
	inpblur(){
		this.isExpand=false
	},
   selectChild (index) {
    // 鼠标点击选择子项
console.log(this.typeaheadData)
    this.searchVal =this.typeaheadData[index].name;
	this.searchdata=this.typeaheadData[0]
   },
	search(){ 
		console.log(this.searchdata)
	  this.$emit('asyncData', this.searchdata); // emit响应的值
	}
  },
 }
</script>
<style scoped>
@import url("index.css");
</style>